<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2024-05-31 14:57:08
 * @LastEditTime: 2024-06-03 14:25:25
 * @FilePath: \vue-admin-template\src\views\Issue\index.vue
-->
<template>
  <div class="app-container">
    <!-- 1. 选择蓝红字 botton -->
    <div v-show="issuebut" style="height: 80vh; margin-bottom: 0;">
      <div class="issuebut">
        <el-button
          size="medium"
          class="buttonC"
          @click="dialogShow('bule')"
          style="margin-right:30px"
          type="primary"
        >
          <img class="imgC" src="~@/assets/issue/lanzi.png"/>
          <h1 class="titleL">蓝字发票</h1>
        </el-button>

        <el-button
          size="medium"
          class="buttonC"
          @click="dialogShow('red')"
          type="danger" 
        >
          <img class="imgC" src="~@/assets/issue/hongzi.png"/>
          <h1 class="titleR">红字发票</h1>
        </el-button>
      </div>
    </div>

    <!-- 2. 红蓝字操作 -->
    <div v-show="!issuebut">
      <!-- 2.1 红字 -->
      <div v-if="invoiceRed=='X'">
        <RedIssue ref="redissue"></RedIssue>
      </div>

      <!-- 2.2 蓝字 -->
      <div v-if="invoiceRed=='Y'">
        <BuleIssue ref="buleissue" @cancleL="cancleL"></BuleIssue>
      </div>

      <!-- 2.3 最底下操作框 -->
      <div class="invioceK">
        <el-button
          type="primary"
          size="medium"
          icon="el-icon-upload"
          @click="importVisiable = true"
        >
          导入开票
        </el-button>
        <el-button
          size="medium"
          type="info"
          @click="showInvioce"
        >
          预览发票
        </el-button>
        <el-button
          size="medium"
          type="primary"
          @click="handInvoice"
          :loading="inLoading"
          icon="el-icon-document-checked"
        >
          发票开具
        </el-button>
      </div>
    </div>

    <!-- 发票预览 -->
    <el-dialog
      title="发票预览"
      width="70%"
      center
      :visible.sync="showDetail"
    >
      <InvoiceElect :invoice-head="totalInfo"></InvoiceElect>
    </el-dialog>

    <!-- 发票导入 -->
    <el-dialog
      title="导入开票"
      :visible.sync="importVisiable"
      width="700px"
      center
    >
      <el-upload 
        ref="upload"
        class="upload-demo"
        :action="URL"
        :on-remove="handleRemove"
        :file-list="fileList"
        multiple
        :http-request="uploadFile"
        :on-change="onChange"
        :auto-upload="false"
      >
        <el-button slot="trigger" size="small" type="primary">目标文件</el-button>
        <el-button style="margin-left: 20px;" size="small" type="success" @click="submitUpload">确认导入</el-button>
        <el-button style="margin-left: 20px;" size="small" type="success"  @click="getTemplate">模板下载</el-button>
        <div slot="tip" class="el-upload__tip" style="font-size: 16px;margin-top: 10px;">文件列表</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import RedIssue from "@/components/issueInvioce/RedIssue.vue";
import BuleIssue from "@/components/issueInvioce/BuleIssue.vue";
import InvoiceElect from '@/common/preInvoice/InvoiceElect.vue' // 数电预览
import axios from 'axios'
import {getTime}  from '@/utils/dealTime.js'
export default {
  name: 'Issue',
  components:{
    RedIssue,
    BuleIssue,
    InvoiceElect
  },
  data() {
    return{
      inLoading: false, 
      issuebut: true, // 选择红蓝字button
      invoiceRed: '', // 'X'红字  'Y'蓝字
      showDetail: false, // 发票预览
      totalInfo: {}, // 发票预览内容
      importVisiable: false, // 发票导入
      URL: 'http://' + this.socketUrl + '/ImportExcelInv/Import',
      fileList: [], // 上传的文件
    }
  },
  methods: {
    // 红蓝字选择 button
    dialogShow(val) {
      this.issuebut = false
      if(val=='red') { // 红字
        this.invoiceRed = 'X'
      } else if (val=='bule') { // 蓝字
        this.invoiceRed = 'Y'
        if(this.$refs.buleissue) this.$refs.buleissue.dialogShow()
      }
    },
    // 蓝字 取消按钮
    cancleL() {
      this.issuebut = true
    },
    // 发票详情
    invioceDe() {
      console.log(this.invoiceRed, "'X'红字  'Y'蓝字" );
      if( this.invoiceRed == 'X') { // // 红字
        this.$refs.redissue.invioceDe()
        this.totalInfo = this.$refs.redissue.invoiceHead
        this.totalInfo.invoiceRed = 'X'
      } else if (this.invoiceRed=='Y') { // 蓝字
        this.$refs.buleissue.invioceDe()
        this.totalInfo.invoiceRed = 'Y'
        this.totalInfo = this.$refs.buleissue.buleInfo
      }
      // this.totalInfo.userName = this.$store.state.user.user.userName // 开票人
    },
    // 发票开具
    async handInvoice() {
      // this.inLoading = true
      // this.invioceDe() // 发票详情
      // this.totalInfo.docNum = 'ZH'+getTime() // 单据号
      // console.log( this.totalInfo, '发票开具信息');
      // const {data: res} = await handInvoice(this.totalInfo)
      // if(!res.success) {
      //   this.inLoading = false
      //   return this.$message.error('发票开具失败！'+res.msg)
      // }
      // this.$message.success('发票开具成功'+res.msg)
      // this.inLoading = false
      // this.$router.push('/invoiceService/Einvoice') // 路由跳转
    },
    // 发票预览
    showInvioce() {
      this.invioceDe() // 发票详情
      this.showDetail = true
    },

    // 发票导入
    onChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    uploadFile(file) {
      this.$refs.upload.submit();
    },
    getTemplate(){
      // let url = 'http://' + this.socketUrl +'/invoiceView/template'
      // let a = document.createElement('a')
      // let event = new MouseEvent('click')
      // a.download = '发票导入模板.xlsx'
      // a.href = url
      // a.dispatchEvent(event)
    },
    submitUpload() {
      // let formData = new FormData();
      // if(this.fileList.length <=0){
      //   this.$message.info("文件上传不能为空！");
      //   return false;
      // }else {
      //   this.fileList.forEach(item => {
      //     formData.append('InvExcel', item.raw)
      //   })
      //   let url = this.URL;
      //   const config = {
      //     headers: { "Content-Type": "multipart/form-data"}
      //   }
      //   axios.post(url, formData, config)
      //     .then((res) => {
      //       var message = res.data.msg + res.data.data
      //       if (res.data.code == 101) {
      //         this.$message.error(res.data.msg);
      //       } else if (res.data.code == 1) {
      //         this.$message.success('发票导入成功！'+message);
      //         this.fileList=[]
      //         this.importVisiable = false
      //       } else {
      //         this.$message.error(message);
      //       }
      //     })
      //     .catch(function (error) {
      //       console.log(error);
      //     });
      // }
    },
  }
}
</script>

<style lang="scss" scoped>
.issuebut{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 100px 0;
  .buttonC{
    position: relative;
    width: 300px;
    padding: 0;
    border-radius: 15px;
    background-color: #fff;
    .tCetnter{
      position: absolute;
      z-index: 999;
      font-size: 50px;
      letter-spacing: 20px;
      top: 180px;
      left: 80px;
    }
    .titleL{
      color: #409eff;
    }
    .titleR{
      color: #F56C6C;
    }
    .imgC{
      width: 100%;
      border-radius: 15px;
    }
    h1{
      margin: 0 0 20px 0;
    }
  }
}

.invioceK{
  z-index: 9;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  left: -15px;
  height: 50px;
  width: 110%;
  background-color: #fff;
}
</style>